<!--
  功能：网卡绑定弹窗
  作者：menghao.yan
  邮箱：yxs2615@163.com
  时间：2023年08月12日 22:27:07
-->
<template>
  <!-- 弹出框 -->
  <a-modal v-model:open="visible" title="网卡修改" width="500px" class="y-modal" okText="创建" @ok="onSubmit" @cancel="onCancel">
    <a-form :label-col="{ span: 6 }" :wrapper-col="{span: 14}">
      <a-form-item label="名称">
        {{modelRef?.interface}}
      </a-form-item>
      <a-form-item label="启动时激活" v-bind="validateInfos.onboot">
        <a-radio-group v-model:value="modelRef.onboot" name="radioGroup">
          <a-radio :value="true">是</a-radio>
          <a-radio :value="false">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="最大传输单元MTU" v-bind="validateInfos.mtu">
        <a-select v-model:value="modelRef.mtu" placeholder="请选择最大传输单元MTU">
          <a-select-option value="">自动</a-select-option>
          <a-select-option value="1500">1500</a-select-option>
          <a-select-option value="9000">9000</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="IP设置" v-bind="validateInfos.bootproto">
        <a-select v-model:value="modelRef.bootproto" placeholder="请选择IP地址">
          <a-select-option value="dhcp">DHCP</a-select-option>
          <a-select-option value="static">指定IP</a-select-option>
          <a-select-option value="none">启动网口</a-select-option>
        </a-select>
      </a-form-item>
      <template v-if="modelRef.bootproto == 'static'">
        <a-form-item label="IP地址" v-bind="validateInfos.ipaddr">
          <a-input v-model:value="modelRef.ipaddr" placeholder="请输入IP地址" />
        </a-form-item>
        <a-form-item label="掩码" v-bind="validateInfos.netmask">
          <a-input v-model:value="modelRef.netmask" placeholder="请输入掩码" />
        </a-form-item>
        <a-form-item label="网关" v-bind="validateInfos.gateway">
          <a-input v-model:value="modelRef.gateway" placeholder="请输入网关" />
        </a-form-item>
      </template>
    </a-form>
  </a-modal>
</template>

<script setup>
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  record: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const { visible, record } = toRefs(props)

// 定义组件的事件
const emits = defineEmits(['update:visible'])

import { Form } from 'ant-design-vue'

const useForm = Form.useForm

const modelRef = reactive({
  interface: record.value?.interface || '',
  onboot: record.value?.onboot,
  bootproto: record.value?.bootproto || 'static',
  mtu: record.value?.mtu || '',
  ipaddr: record.value?.ipaddr || '',
  netmask: record.value?.netmask || '',
  gateway: record.value?.gateway || '',
  ipAddress: ''
})

const rulesRef = reactive({
  ipaddr: [
    {
      required: true,
      message: '请输入Ip地址'
    }
  ],
  netmask: [
    {
      required: true,
      message: '请输入掩码'
    }
  ],
  gateway: [
    {
      required: true,
      message: '请输入网关'
    }
  ]
})

const { resetFields, validate, validateInfos, mergeValidateInfo } = useForm(modelRef, rulesRef)
const onSubmit = () => {
  validate()
    .then(() => {
      console.log('修改网卡>>', toRaw(modelRef))
      setNetworkTable()
    })
    .catch(err => {
      console.log('error', err)
    })
}

const onCancel = () => {
  // 触发自定义事件来通知父组件关闭弹窗
  emits('update:visible', false)
}

// 设置网络更新
let setNetworkTable = () => {
  let params = {
    interface: modelRef.interface,
    bootproto: modelRef.bootproto,
    mtu: modelRef.mtu,
    ipaddr: modelRef.ipaddr,
    netmask: modelRef.netmask,
    gateway: modelRef.gateway,
    onboot: modelRef.onboot ? '1' : '0'
  }
  apiWs.setNet(params).subscribe(resp => {
    onCancel()
    emits('loadTable')
  })
}
</script>

<style scoped>
</style>